<template>
  <div>
    <Card shadow style="margin-bottom:10px;">
      <div
        style="font-size:36px;font-weight:20px;text-align:center;background-color:#E0FFFF;color:#2d8cf0;padding:8px;letter-spacing:5px;border-radius:5px;"
      >智慧护栏综合管理平台</div>
    </Card>
    <Row>
      <i-col
        :xs="12"
        :md="8"
        :lg="{ span: 4,offset:i>0&i<5?1:0 }"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 80px;padding-bottom: 5px;"
      >
        <div @click="routTo(infor.title)" style="height:100%;">
          <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
            <count-to :end="infor.count" count-class="count-style"/>
            <p>{{ infor.title }}</p>
          </infor-card>
        </div>
      </i-col>
    </Row>
    <Card shadow>
      <div :style="{'height':mapHeight+'px'}">
        <bigMap @updateAlarmCount="updateAlarmCount"></bigMap>
      </div>
    </Card>

    <!-- <Row :gutter="20" style="margin-top: 10px;">
     
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
        </Card>
      </i-col>
    </Row>-->
  </div>
</template>

<script>
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import bigMap from "@/view/operate/big-screen-map/big-screen-map.vue";
import { realtimeCount } from "@/api/operate";
export default {
  name: "home",
  components: {
    InforCard,
    CountTo,
    bigMap
  },
  data() {
    return {
      mapHeight: window.innerHeight - 360,
      inforCardData: [
        {
          title: "设备总数",
          icon: "md-cube",
          count: 0,
          color: "#2d8cf0"
        },
        { title: "报警数", icon: "ios-warning", count: 0, color: "#ed4014" },
        {
          title: "待检修",
          icon: "md-help-circle",
          count: 0,
          color: "#ff9900"
        },
        { title: "待安装", icon: "md-build", count: 0, color: "#808695" },
        {
          title: "工作中",
          icon: "md-done-all",
          count: 0,
          color: "#19be6b"
        }
        // { title: "离线", icon: "md-map", count: 14, color: "#9A66E4" }
      ]
    };
  },
  mounted() {
    this.getRealtimeCount();
    this.mapHeight =
      window.innerHeight - 360 < 300 ? 300 : window.innerHeight - 360;
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下高度．
    const that = this;
    window.addEventListener("resize", function() {
      that.mapHeight =
        window.innerHeight - 360 < 300 ? 300 : window.innerHeight - 360;
    });
  },
  methods: {
    async getRealtimeCount() {
      let result = await realtimeCount(realtimeCount);
      if (result.code == 0) {
        let res = result.data[0];
        this.inforCardData[0].count = res.totalCount;
        this.inforCardData[1].count = res.alarmCount;
        this.inforCardData[2].count = res.broken;
        this.inforCardData[3].count = res.waitInstall;
        this.inforCardData[4].count = res.workingCount;
      }
    },
    updateAlarmCount(addCount) {
      if (addCount > 0) {
        this.inforCardData[1].count = this.inforCardData[1].count + addCount;
      } else {
        if (this.inforCardData[1].count != 0) {
          this.inforCardData[1].count = this.inforCardData[1].count + addCount;
        }
      }
    },
    routTo(title) {
      //页面跳转
      let routerName = "";
      let status = "";
      if (title == "设备总数") {
        routerName = "bar-device";
        status = 0;
      } else if (title == "报警数") {
          routerName = "alarm";
      } else if (title == "待检修") {
        routerName = "bar-device";
        status = 4;
      } else if (title == "待安装") {
        routerName = "sim-import";
      } else if (title == "工作中") {
        routerName = "bar-device";
        status = 3;
      }
      this.$router.push({
        name: routerName,
        query: {
          status: status
        }
      });
    }
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 44px;
}
</style>
